<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5中的Canvas组件</title>
    <script type="text/javascript">
       /* 问题是 script 放head 里面无效 要放下面中的body中才有效*/
    </script>
</head>
<body>

    <p>下面测试矩形Canvas</p>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3"></canvas>

    <p>下面测试线条 Canvas</p>
    <canvas id="lineCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>

    <p>下面测试 圆形 canvas</p>
    <canvas id="circleCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>

    <p>下面测试 渐变的 canvas</p>
    <canvas id="gradientCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>

    <p>下面测试 图片Canvas</p>
    <p style="color: #cc2200">图片没有显示出来!!!!!!</p>
    <canvas id="imageCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>

    <script type="text/javascript">

        var myCanvas = document.getElementById("myCanvas");
        var cxt = myCanvas.getContext("2d");
        cxt.fillStyle = "#FF0000";
        cxt.fillRect(0,0,150,75);

        var c=document.getElementById("lineCanvas");
        var cxt2=c.getContext("2d");
        cxt2.moveTo(10,10);
        cxt2.lineTo(150,50);
        cxt2.lineTo(10,50);
        cxt2.lineTo(10,10);
        cxt2.stroke();

        var circleCanvas = document.getElementById("circleCanvas")
        var circleCtx = circleCanvas.getContext("2d")
        circleCtx.fillStyle="#FF0000";
        circleCtx.beginPath();
        // circleCtx.arc(70,18,15,0,Math.PI*2,true);
        circleCtx.arc(70,18,15,Math.PI*0.5,Math.PI*2,false);
        circleCtx.closePath();
        circleCtx.fill();

        var gradientCanvas = document.getElementById("gradientCanvas")
        var gradientCtx = gradientCanvas.getContext("2d")
        var grd = gradientCtx.createLinearGradient(0,0,175,50)  // 创建渐变的区域
        grd.addColorStop(0,"#FF0000")
        grd.addColorStop(1,"#00FF00")
        gradientCtx.fillStyle = grd
        gradientCtx.fillRect(0,0,175,50) /* 这是 从左边往右边的 渐变色 没有从 右上角*/

        var imageCanvas = document.getElementById("imageCanvas")
        var imageCxt = imageCanvas.getContext("2d")
        var img = new Image()
        img.src = "../images/cute_Panda.JPG"
        imageCxt.drawImage(img,50,50,50,50)  /* 图片起点的 x,y,width,height 等*/
        
    </script>
</body>
</html>